<template>
  <div class="write">
        <div class="write-top">
            <p class="write-p1">文章记录</p>
            <el-button icon="el-icon-plus">新建柠记</el-button>
        </div>
        <div class="write-mid">
            <p>柠记1</p>
        </div>
        <div class="write-bot">
            <div class="write-tag">
                <el-tag>学习</el-tag>
                <el-tag type="danger">日记</el-tag>
            </div>
            <p class="write-date">发布于：2022/10/10</p>
        </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.write{
    width:38vw;
    margin-top:3vh;
    margin-left:1vh;
    height:20vh;
    padding:1vw 1vw 0vw 1vw;
    display: flex;
    flex-direction: column;
    background-color: #FAFDF4;
    justify-content: space-between;
    border-radius: 16px;
    animation: fade-in;/*动画名称*/
    animation-duration: 0.5s;/*动画持续时间*/
    -webkit-animation:fade-in 0.5s;/*针对webkit内核*/
     -moz-box-shadow: 1px 1px 5px #D5EDA1;/*firefox*/
    -webkit-box-shadow: 1px 1px 5px #D5EDA1;/*safari或chrome*/
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
    &-top{
        display:flex;
        justify-content: space-between;
        .el-button{
            height:5vh;
            background-color:#A5D63F;
            border-radius: 16px;
            color:black;
            margin-right:1vw;
            margin-top:1vh;
        }
    }
     &-p1{
            display:inline-block;
            font-size: 30px;
            margin:0 0 0 1vw;
        }
    &-bot{
        margin:0 0 0 1vw;
        display:flex;
        justify-content: space-between;
    }
    &-mid{
        color: rgba(154, 162, 172, 1);
        font-size: 16px;
        margin:0 0 0 1vw;
    }
    &-date{
        color: rgba(39, 41, 44, 1);
        font-size: 14px;
        margin-right:1vw;
    }
    .el-tag{
        margin-right:1vw;
        width:3.1vw;
    }
}
.write:hover{
     box-shadow: inset -6px -6px 10px #c78534,
                 inset 6px 6px 20px rgba(0, 0, 0, 0.05);
     transform: scale(0.95);
    cursor: url('https://pic1.imgdb.cn/item/633e7c9d16f2c2beb19e9633.png'),pointer;
     transition: all 0.2s linear;
     -moz-box-shadow: 1px 1px 5px #D5EDA1;/*firefox*/
     -webkit-box-shadow: 1px 1px 5px #D5EDA1;/*safari或chrome*/
     box-shadow:1px 1px 5px #D5EDA1;/*opera或ie9*/
     background-color:#EAFFBD;
     color:#0D8078;
  }
</style>
